<template>
  <div class="pagelog">
    <div class="panel-search-top">
      <el-form :inline="true" size="mini">
        <el-form-item label="日期">
          <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <!-- <el-date-picker type="datetime" placeholder="选择日期时间">
          </el-date-picker> -->
        </el-form-item>
        <el-form-item label="业务系统">
          <el-select placeholder="业务系统">
            <el-option label="PMS-数据库-主机名" value="PMS-数据库-主机名"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="pagecontent">
      <div class="panel">
        <div class="panel-title icon-KPIindexname">
          日志错误个数统计
        </div>
        <div class="panel-con">
          <div id="echart1">
            <diagram-echarts :data="diagramEcharts.c1" bg="#fff" :show="diagram.c1" type="style1"></diagram-echarts>
          </div>
        </div>
      </div>

      <div class="panel2">
        <!-- <div class="title">
          <el-form size="mini">
            <el-form-item label="日志类型">
              <el-select placeholder="日志类型" value="1">
                <el-option label="WEB日志" value="1"></el-option>
                <el-option label="WEB日志2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div> -->
        <div>
          <el-row>
            <el-col :span="3">
              <div class="detail-search">
                <el-form :inline="true" class="demo-form-inline" size="mini">
                  <el-form-item label-width="0px">
                    <el-input placeholder="输入过滤字段"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <el-tree :data="menu.menudata" :props="menu.defaultProps"></el-tree>
            </el-col>
            <el-col :span="21">
              <el-tabs class="base-tabs" v-model="tabs.isActive">
                <el-tab-pane label="事件" name="tab1">
                  <el-row>
                    <el-col :span="3">
                      <el-table class="eventtable" @row-click="eventrowclick" :row-class-name="tableRowClassName" :data="eventlist" height="250" :show-header="false">
                        <el-table-column   fixed prop="title" label="">
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col :span="21" class="echart-panel">

                      <el-table :data="json.portraitC1" height="250" @row-click="dialogVisible=true">
                        <el-table-column prop="c1" label="日期时间" width="91">
                        </el-table-column>
                        <el-table-column prop="c2" label="业务系统" width="89">
                        </el-table-column>
                        <el-table-column prop="c3" label="组件名" width="83">
                        </el-table-column>
                        <el-table-column prop="c4" label="主机名" width="97">

                        </el-table-column>
                        <el-table-column prop="c5" label="日志类型" width="79">
                        </el-table-column>
                        <el-table-column prop="c6" label="日志方法" width="73">
                        </el-table-column>
                        <el-table-column prop="c7" label="事件" width="88">
                        </el-table-column>
                        <el-table-column prop="c8" label="统计个数" width="78">
                        </el-table-column>
                        <el-table-column prop="c9" label="详细内容">
                        </el-table-column>
                      </el-table>
                      <div class="compage">
                        <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
                      </div>
                      <div class="clear"></div>
                    </el-col>
                  </el-row>

                </el-tab-pane>
                <!-- <el-tab-pane label="统计" name="tab2">统计</el-tab-pane> -->
              </el-tabs>
            </el-col>
          </el-row>

        </div>
      </div>
    </div>
    <el-dialog title="详细内容" width="650px" :visible.sync="dialogVisible">
      <el-table :data="json.portraitC1" height="465">
        <el-table-column property="c1" label="时间" width="126"></el-table-column>
        <el-table-column property="c2" label="详细内容"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import Data from "../data/index";
import diagramEcharts from "../components/portrait/echarts";
export default {
  name: "Log",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      menu: {
        menudata: [
          {
            label: "overview",
            children: [
              {
                label: "二级 1-1",
                children: [
                  {
                    label: "三级 1-1-1"
                  }
                ]
              }
            ]
          },
          {
            label: "apache",
            children: [
              {
                label: "dcisbb"
              },
              {
                label: "shcucibds "
              },
              {
                label: "dcisbb"
              },
              {
                label: "shcucibds "
              },
              {
                label: "dcisbb"
              }
            ]
          }
        ],
        defaultProps: {
          children: "children",
          label: "label"
        }
      },
      tabs: {
        isActive: "tab1"
      },
      formdata: {
        form2: {
          times: [{ v1: 1, v2: 1 }, { v1: 2, v2: 2 }]
        },
        form3: {
          values: [{ v1: 1, v2: 1 }, { v1: 2, v2: 2 }]
        },
        form8: {
          values: [{ value: "1%" }, { value: "2%" }]
        }
      },
      eventindex: 5,
      eventlist: [
        {
          title: "事件计数"
        },
        {
          title: "时间分段"
        },
        {
          title: "数值分段"
        },
        {
          title: "时间直方图 "
        },
        {
          title: "数值直方图"
        },
        {
          title: "字段值分类"
        },
        {
          title: "字段数值"
        },
        {
          title: "累计百分比"
        }
      ],
      dialogVisible: false,
      diagram: {
        c1: true
      },
      diagramEcharts: {
        c1: {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          isboundaryGap: true,
          color: "#E1684D",
          xAxisData: [
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00"
          ],
          series: []
        }
      },
      json: {
        portraitC1: Data.portraitC1
      }
    };
  },
  components: {
    diagramEcharts
  },
  mounted() {
    this.initEcharts();
  },
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    initEcharts() {
      let seriesData = [];
      for (var i = 0; i < 12; i++) {
        seriesData.push({
          type: "bar",
          barWidth: 4,
          data: [100, 200, 100, 200, 100, 200, 100, 200, 100]
        });
      }
      this.diagramEcharts.c1.series = seriesData;
    },
    eventrowclick(){
      alert('点击');
    }
  }
};
</script>
<style lang="scss">
@import url(../assets/css/base.css);
</style>

<style lang="scss" scoped>
.pagelog {
  background: #fff;
}
.pagecontent {
  padding: 20px;
  #echart1 {
    height: 212px;
  }
  .panel {
    .panel-title {
      margin-top: 0px;
    }
  }
}
</style>
